<template>
  <div>
    <el-card>
      <span>胡帅</span>
      <!-- 记录栏 -->
      <el-alert type="info" :closable="false">
        <template>
          <i class="el-icon-info"></i>
          共{{ tableInfo.length }}条记录
        </template>
      </el-alert>
      <!-- 表格 -->
      <template>
        <el-table
          :data="tableInfo"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%">
          <el-table-column
            prop="type"
            label="操作类型"
            width="350">
          </el-table-column>
          <el-table-column
            prop="reviewer"
            label="操作人"
            width="250">
          </el-table-column>
          <el-table-column
            prop="title"
            label="执行结果"
            width="400"
            align="left"
            header-align="left"
            >
          </el-table-column>
          <el-table-column
            prop="display_time"
            label="操作时间">
          </el-table-column>
          <el-table-column
            prop="forecast"
            label="描述">
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="tableData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin:20px 0; float:right"
        background
        :total="tableInfo.length">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/example/table.js'
export default {
  data () {
    return {
      tableData: {
        page: 1,
        pagesize: 10,
        keyword: '',
        disabled: 1
      },
      tableInfo: [],
      currentPage: 1,
      tableInfoPlus: []
    }
  },

  created () {
    this.loadTableData()
  },

  methods: {
    async loadTableData () {
      const res = await list(this.tableData)
      // console.log(res)
      this.tableInfo = res.data.items
      this.tableInfoPlus = res.data
      console.log(res)
    },
    handleSizeChange (val) {
      // console.log(val)
      this.tableData.pagesize = val
      this.loadTableData()
    },
    handleCurrentChange (val) {
      // console.log(val)
      this.tableData.page = val
      this.loadTableData()
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-card{
  margin: 20px !important;
}
</style>
